<template>
  <div>
    <div class="mb16">
      <el-date-picker
        :value="value"
        @input="change"
        value-format="yyyy-MM"
        type="month"
        size="small"
        :disabled="disabled"
        placeholder="选择月">
      </el-date-picker>
    </div>
    <div class="rili-content">
      <div class="rili-header">
        <div class="header-item" @click="headerItemClick(item)" v-for="item in weekly" :key="item.value">
          <span>{{ item.text }}</span> &nbsp;<i style="color: #333;" class="el-icon-circle-plus"></i>
        </div>
      </div>
      <div class="rili-body">
        <div
          class="body-item"
          @click="bodyItemClick(item)"
          :class="[item.disabled || disabled ? '' : 'useitem']"
          v-for="(item, index) in oprData"
          :key="index"
        >
          <div class="value" v-if="item.value">{{ item.value }}</div>
          <div class="ticketinfo" v-if="item.storeInfo">
            <div class="t1">价格人数</div>
            <div class="p">成人价：{{item.storeInfo.price}}</div>
            <div class="p">儿童价：{{item.storeInfo.child_price}}</div>
            <div class="p">房间差价：{{item.storeInfo.diff_price}}</div>
            <div class="p">售：{{item.storeInfo.purchased}}</div>
            <div class="p">余：{{item.storeInfo.stock}}</div>
          </div>
          <div v-if="!item.disabled && item.checked" class="checkdiv">
            <i class="iconfont icon-right-f"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- <div @click="checkOneToFive">周一到周五</div>
    <div @click="checkWeekend">周末</div>
    <div @click="checkAll">全月</div>
    <div @click="reset">回复</div>
    <div @click="setTicketData(obj)">设置数据</div> -->
  </div>
</template>

<script>
import { getMonthDayNum, getMonth1haoDay } from "common/js/util";

const weekly = [
  { value: 1, text: "一" },
  { value: 2, text: "二" },
  { value: 3, text: "三" },
  { value: 4, text: "四" },
  { value: 5, text: "五" },
  { value: 6, text: "六" },
  { value: 7, text: "日" },
];
let obj = {
  "price": "200",
  "child_price": "100",
  "diff_price": "100",
  "stock": "90",
}
export default {
  props: {
    value: {
      default: "2019-1"
    },
    disabled: {

    }
  },
  data() {
    return {
      weekly,
      obj,
      oprData: []
    };
  },
  methods: {
    change(val) {
      console.log(val)
      this.$emit('input', val)
    },
    
    createDataByDate(value) {
      // 获取这个月 有多少天
      let dayNum = getMonthDayNum(value);
      // 一号是星期几
      let firstDay = getMonth1haoDay(value);
      return this.createData(firstDay, dayNum)
    },
    createData(firstDay, dayNum) {
      let arr = [];
      let fillNum = firstDay - 1;
      let lastLen = (fillNum + dayNum) % 7;
      let lastFillLen = 7 - lastLen;
      for (let i = 0; i < fillNum; i++) {
        arr.push({repertory_id: -1, value: 0, checked: false, disabled: true, storeInfo: null });
      }
      for (let i = 1; i <= dayNum; i++) {
        arr.push({
          repertory_id: -1,
          value: i,
          checked: false,
          disabled: false,
          storeInfo: null
        });
      }
      for (let i = 0; i < lastFillLen; i++) {
        arr.push({ repertory_id: -1, value: 0, checked: false, disabled: true, storeInfo: null });
      }
      return arr
    },
    setMonthData(value) {
      this.oprData = this.createDataByDate(value);
    },
    headerItemClick(item, checkval) {
      if(this.disabled) return
      let arr = []
      let value = item.value
      for(let i = value -1, len = this.oprData.length; i < len; i+=7) {
        let item = this.oprData[i]
        if(item.value != 0) arr.push(item.value)
      }
      this.setCheck(arr, checkval)
    },
    bodyItemClick(item) {
      if(this.disabled) return
      if(item.value) this.setCheck(item.value, !item.checked);
    },
    // 周一到周五选择
    checkOneToFive() {
      this.headerItemClick(this.weekly[0], true)
      this.headerItemClick(this.weekly[1], true)
      this.headerItemClick(this.weekly[2], true)
      this.headerItemClick(this.weekly[3], true)
      this.headerItemClick(this.weekly[4], true)
      this.headerItemClick(this.weekly[5], false)
      this.headerItemClick(this.weekly[6], false)
    },
    checkWeekend() {
      this.headerItemClick(this.weekly[0], false)
      this.headerItemClick(this.weekly[1], false)
      this.headerItemClick(this.weekly[2], false)
      this.headerItemClick(this.weekly[3], false)
      this.headerItemClick(this.weekly[4], false)
      this.headerItemClick(this.weekly[5], true)
      this.headerItemClick(this.weekly[6], true)
    },
    checkAll() {
      this.headerItemClick(this.weekly[0])
      this.headerItemClick(this.weekly[1])
      this.headerItemClick(this.weekly[2])
      this.headerItemClick(this.weekly[3])
      this.headerItemClick(this.weekly[4])
      this.headerItemClick(this.weekly[5])
      this.headerItemClick(this.weekly[6])
    },
    reset() {
      this.headerItemClick(this.weekly[0], false)
      this.headerItemClick(this.weekly[1], false)
      this.headerItemClick(this.weekly[2], false)
      this.headerItemClick(this.weekly[3], false)
      this.headerItemClick(this.weekly[4], false)
      this.headerItemClick(this.weekly[5], false)
      this.headerItemClick(this.weekly[6], false)
    },
    setCheck(checkArr, value = true) {
      if (!Array.isArray(checkArr)) {
        checkArr = [checkArr];
      }
      this.oprData.forEach(item => {
        if (checkArr.indexOf(item.value) > -1) {
          item.checked = value;
        }
      });
    },
    getData() {
      let obj = {}
      obj.month = this.value
      obj.month_detail = this.oprData
      return obj
    },
    // 设置数据
    setData(data) {
      this.oprData = data
    },
    // 设置选中的
    setTicketData(obj) {
      let i = 0
      this.oprData.forEach(item => {
        if(item.checked) {
          item.storeInfo = {...obj}
          item.storeInfo.total = obj.stock
          item.storeInfo.purchased = 0
          i++
        }
      })
      if(i==0) {
        this.$message.error('还未选择要操作的日期');
        return false
      }
      return true

    },
    // 清除选中的
    clearTicketData() {
      let i = 0
      this.oprData.forEach(item => {
        if(item.checked) {
          item.storeInfo = null
          i++
        }
      })
      if(i==0) {
        this.$message.error('还未选择要操作的日期');
      }
    },
    
    initView(value) {
      // // 获取这个月 有多少天
      // this.dayNum = getMonthDayNum(value);
      // // 一号是星期几
      // this.firstDay = getMonth1haoDay(value);
      // 构建一个数组
      this.setMonthData(value);
    }
  },
  mounted() {
    this.initView(this.value)
  }
};
</script>

<style lang="scss" scoped>
$width: 700px;
$width-item: 100px;
.ticketinfo{
  font-size: 12px;
  line-height: 1.2;
  .t1{
    font-size: 14px;
    color: #fff;
    background: #19be6b;
    padding: 2px 3px;
  }
}
.rili-content {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  width: $width;
  .rili-header {
    width: $width;
    display: flex;
    .header-item {
      width: $width-item;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
    }
  }
  .rili-body {
    width: $width;
    display: flex;
    flex-wrap: wrap;
    .body-item {
      width: $width-item;
      padding: 8px;
      min-height: 120px;
      position: relative;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
    }
    .useitem {
      cursor: pointer;
      &:hover {
        background: #f5f5f5;
      }
    }
    .checkdiv {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border: 1px solid #19be6b;
      .icon-right-f{
        position: absolute;
        right: 2px;
        top: 2px;
        color: #19be6b;
      }
    }
  }
}
</style>
